<template>
	<view>
		<view class="main">
			<view class="flex-1">
				<view class="top-sec">
					<view class="title">充电完成</view>
					<view class="txt">充电桩已充电完成，感谢您的使用</view>
				</view>
				<view class="mod info-sec">
					<view class="title">佛山大良保利广场充电站</view>
					<view class="flex">
						<view class="bh">
							<text class="wz1">编号</text>
							<text class="wz2">CDZ00001</text>
						</view>
					</view>
					<view class="address">
						广东省佛山市顺德区观绿路3号保利广场停车场
						<view class="navi">
							<image src="../../static/images/icon_09.png" class="ico" mode="widthFix"></image>导航
						</view>
					</view>
				</view>
				<view class="mod xx-sec">
					<view class="t-tit">订单信息</view>
					<view class="box">
						<view class="row">
							<text class="fz1">订单编号</text>
							<view class="fz2">
								<text>{{copyTxt}}</text>
								<text class="copy" @click="copy(copyTxt)">复制</text>
							</view>
						</view>
						<view class="row">
							<text class="fz1">充电量</text>
							<view class="fz2">3.14度</view>
						</view>
						<view class="row">
							<text class="fz1">充电时长</text>
							<view class="fz2">01:20:00 </view>
						</view>
						<view class="row">
							<text class="fz1">车牌号</text>
							<view class="fz2">粤E·DH666</view>
						</view>
						<view class="row">
							<text class="fz1">订单日期</text>
							<view class="fz2">2024-12-17 22:12:33</view>
						</view>
						<view class="row">
							<text class="fz1">支付时间</text>
							<view class="fz2">2024-12-17 22:12:33</view>
						</view>
						<view class="row">
							<text class="fz1">开始时间</text>
							<view class="fz2">2024-12-17 22:12:33</view>
						</view>
						<view class="row">
							<text class="fz1">结束时间</text>
							<view class="fz2">2024-12-17 22:12:33</view>
						</view>
					</view>

				</view>
				<view class="mod xx-sec">
					<view class="t-tit">发票信息</view>
					<view class="box">
						<view class="row">
							<text class="fz1">抬头类型</text>
							<view class="fz2">企业</view>
						</view>
						<view class="row">
							<text class="fz1">发票类型</text>
							<view class="fz2">电子发票</view>
						</view>
						<view class="row">
							<text class="fz1">发票抬头</text>
							<view class="fz2">广东星洛科技有限公司</view>
						</view>
						<view class="row">
							<text class="fz1">公司税号</text>
							<view class="fz2">4460 9441 1645 7875 43</view>
						</view>
						<view class="row">
							<text class="fz1">发票金额</text>
							<view class="fz2">￥162.00</view>
						</view>
						<view class="row">
							<text class="fz1">真实姓名</text>
							<view class="fz2">王小明</view>
						</view>
						<view class="row">
							<text class="fz1">联系电话</text>
							<view class="fz2">15017548878</view>
						</view>
						<view class="row">
							<text class="fz1">电子邮箱</text>
							<view class="fz2">5714614521@qq.com</view>
						</view>
					</view>
				</view>
			</view>
			<button class="submit">同意协议并支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				copyTxt: '202410300001'
			}
		},
		onLoad() {

		},
		methods: {
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);



	.main {
		min-height: calc(100vh - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;

		.top-sec {
			padding: 55rpx 40rpx;
			height: 290rpx;
			background: linear-gradient(90deg, #FE5E10 0%, #FF884D 100%);

			.title {
				font-size: 44rpx;
				color: #fff;
				line-height: 50rpx;
				font-weight: 700;
			}

			.txt {
				font-size: 24rpx;
				color: #fff;
				line-height: 28rpx;
				margin-top: 14rpx;
			}
		}

		.mod {
			background-color: #fff;
			padding: 30rpx 30rpx;
			margin: 0 20rpx 20rpx;
			border-radius: 20rpx;

			.t-tit {
				font-size: 32rpx;
				color: #262626;
				line-height: 36rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		}

		.info-sec {
			margin-top: -100rpx;
			position: relative;
			z-index: 5;

			.title {
				font-size: 32rpx;
				color: #262626;
				font-weight: 700;
			}

			.bh {
				margin-top: 10rpx;
				overflow: hidden;
				display: flex;

				.wz1 {
					font-size: 22rpx;
					font-weight: 700;
					color: #fff;
					width: 66rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					background: linear-gradient(90deg, #FF864A 0%, #F93701 100%);
					border-radius: 4rpx;
					position: relative;
					z-index: 2;
				}

				.wz2 {
					font-size: 24rpx;
					color: #FE5E10;
					padding: 0 15rpx 0 25rpx;
					margin-left: -10rpx;
					line-height: 30rpx;
					border: 1rpx solid #FE5E10;
					border-radius: 4rpx;
				}
			}

			.address {
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;

				.navi {
					font-size: 20rpx;
					color: #4073FA;
					border-radius: 200rpx;
					background: #E8F3FF;
					width: 92rpx;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 4rpx;
					margin-left: 10rpx;
					display: inline-block;
					vertical-align: middle;

					.ico {
						width: 28rpx;
						height: 28rpx;
						margin-right: 6rpx;
						display: inline-block;
						vertical-align: middle;
					}
				}
			}
		}


		.xx-sec {
			.row {
				font-size: 28rpx;
				line-height: 34rpx;
				padding: 15rpx 0;
				display: flex;
				align-items: flex-start;

				.fz1 {
					color: #999;
					min-width: 180rpx;
				}

				.fz2 {
					color: #262626;
					flex: 1;
					overflow: hidden;
					text-align: right;
				}

				.copy {
					color: #4073FA;
					margin-left: 15rpx;
				}
			}
		}

		.submit {
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
			width: 710rpx;
			line-height: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background: linear-gradient(124.39deg, #FE5E10 0%, #FF8045 99.31%);
			margin: 10rpx auto 0;
		}


	}
</style>